<script setup>
import {reactive} from "vue";
import {login, getEncodePassword } from "@/api/userApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
const formState = reactive({  //动态响应值
  phone: '',
  password: '',
});

const onFinish = async values => {
// 1、使用公钥对password进行加密
  const encodePassword = await getEncodePassword(formState.password);

  const param = {
    phone: formState.phone,
    password: encodePassword,
  };

  const { code, msg, data} = await login(param);
  debugger;
  if (code == '200') {
    //登录成功，跳转到主页
    await router.push("/");
  }
}

//提交失败事件
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
</script>

<template>
  <div style="background: aliceblue; padding: 30px; height: 100vh; display: flex; justify-content: center; align-items: center;">
    <a-card title="注册" :bordered="false" style="width: 600px">
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="手机号"
            name="phone"
            :rules="[
                { required: true, message: '手机号必填!' },
                { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的手机号!'}
            ]"
        >
          <a-input v-model:value="formState.phone" />
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
          <a-button type="primary" html-type="submit" danger>前往注册</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<style scoped>

</style>